<!DOCTYPE html> 
<html> 
<head>
	<title>jQuery Drop Down Button Demo</title>
	<link type="text/css" rel="stylesheet" href="css/start/jquery-ui-1.8.10.custom.css" />
	
	
	<style type="text/css">
		ul li {white-space: nowrap; }
		img { border: none; vertical-align: bottom; }
	</style>
	
	<script type="text/javascript" src="./libs/jquery-1.4.4.min.js"></script>
	<script type="text/javascript" src="./libs/jquery-ui-1.8.10.custom.min.js"></script>
	<script type="text/javascript" src="./jQuery.dropDownButton.js"></script>
	
	<script type="text/javascript">
	    $(function() {
	        $("#demoButtonOne").dropDownButton({
	            content: $("#demoContentOne"),
	            effect: "",
	            effectSpeed: 500
	        });
	        $("#demoButtonTwo").dropDownButton({
	            content: $("#demoContentTwo"),
	            effect: "slide",
	            effectSpeed: 250
	        });
	        $("#demoButtonThree").dropDownButton({
	            content: [
					{ text: "Option One", value: 1 },
					{ text: "Option Two", value: 2 },
					{ text: "Option Three", value: 3 },
					{ text: "Option Four", value: 4 },
					{ text: "Option Five", value: 5 }
				]
	        });
	        $("#demoButtonFour").dropDownButton({ content: $("#demoContentFour") });
	    });
	</script>
</head>
<body style="font-size: 65%;">
	<h1>Drop Down Button Demo</h1>
	<div>
		<button id="demoButtonOne"><span>Example Button</span></button>
		<ul id="demoContentOne" style="position: absolute; display: none;">
			<li><a href="javascript:void(0);" value="1">Option 1</a></li>
			<li><a href="javascript:void(0);" value="2">Option 2</a></li>
			<li><a href="javascript:void(0);" value="3">Option 3</a></li>
			<li><a href="javascript:void(0);" value="4">Option 4</a></li>
			<li><a href="javascript:void(0);" value="5">Option 5</a></li>
		</ul>
		<button id="demoButtonThree"><span>Example Button</span></button>
		<button id="demoButtonFour"><span>Choose Line Style</span></button>
		<ul id="demoContentFour" style="position: absolute; display: none;">
		    <li><a href="javascript:void(0);" value="0"><img src="img/lineStyleSolid.png" alt="Solid" /></a></li>
		    <li><a href="javascript:void(0);" value="1"><img src="img/lineStyleDash.png" alt="Dash" /></a></li>
		    <li><a href="javascript:void(0);" value="2"><img src="img/lineStyleDot.png" alt="Dot" /></a></li>
		    <li><a href="javascript:void(0);" value="3"><img src="img/lineStyleDashDot.png" alt="Dash Dot" /></a></li>
		    <li><a href="javascript:void(0);" value="4"><img src="img/lineStyleDashDotDot.png" alt="Dash Dot Dot" /></a></li>
		</ul>
		<br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/>
		<button id="demoButtonTwo"><span>Example Button</span></button>
		<ul id="demoContentTwo">
			<li><a href="javascript:void(0);" value="1">Option 1</a></li>
			<li><a href="javascript:void(0);" value="2">Option 2</a></li>
			<li><a href="javascript:void(0);" value="3">Option 3</a></li>
			<li><a href="javascript:void(0);" value="4">Option 4</a></li>
			<li><a href="javascript:void(0);" value="5">Option 5</a></li>
		</ul>
	</div>
</body>
</html> 